<!--  -->
<template>
  <div class="simulation" :class="isFoot ? '' : 'full'">
    <div class="sml-main">
      <div class="sml-img">
        <img :src="isCover(simulationDetail.cover)" />
      </div>
      <div class="sml-dt">
        <div class="sml-tl">
          <span class="tip">客户端</span>{{ simulationDetail.name }}
        </div>
        <div class="sml-tx">
          {{ simulationDetail.description }}
        </div>
        <div class="sml-line"></div>
      </div>
      <div class="sml-infor">
        <div class="sml-inf-gp">
          <div class="sml-inf-item">
            <div class="sml-inf-img">
              <img src="~@/assets/images/simulation/1.png" />
            </div>
            <div class="sml-inf-tl">虚仿访问量 （次）</div>
            <div class="sml-num">3652</div>
          </div>
        </div>
        <div class="sml-inf-gp">
          <div class="sml-inf-item">
            <div class="sml-inf-img">
              <img src="~@/assets/images/simulation/2.png" />
            </div>
            <div class="sml-inf-tl">实验点击量 （次）</div>
            <div class="sml-num">2766</div>
          </div>
        </div>
        <div class="sml-inf-gp">
          <div class="sml-inf-item">
            <div class="sml-inf-img">
              <img src="~@/assets/images/simulation/3.png" />
            </div>
            <div class="sml-inf-tl">学习总时长 （小时）</div>
            <div class="sml-num">1256</div>
          </div>
        </div>
        <div class="sml-inf-gp">
          <div class="sml-inf-item">
            <div class="sml-inf-img">
              <img src="~@/assets/images/simulation/4.png" />
            </div>
            <div class="sml-inf-tl">合作院校 （所）</div>
            <div class="sml-num">136</div>
          </div>
        </div>
      </div>
      <div class="sml-ct">
        <div class="sml-tabs">
          <div
            class="sml-tabs-item"
            :class="type == 1 ? 'on' : ''"
            @click="type = 1"
          >
            项目列表
          </div>
          <div
            class="sml-tabs-item"
            :class="type == 2 ? 'on' : ''"
            @click="type = 2"
          >
            虚仿简介
          </div>
        </div>
        <div class="sml-list-box">
          <template v-for="item in simulationList" v-if="type == 1">
            <div class="sml-list-gp">
              <div class="sml-list-img">
                <img :src="isCover(item.cover)" />
              </div>
              <div class="sml-list-tl">{{ item.name }}</div>
              <div class="sml-list-tip" :class="`lv-${item.projectLevel}`">
                {{
                  item.projectLevel == 1
                    ? "初级"
                    : item.projectLevel == 2
                    ? "中级"
                    : "高级"
                }}
              </div>
            </div>
          </template>
          <template v-else>
            <div
              class="show-tx"
              v-html="simulationDetail.introductionPath"
            ></div>
          </template>
        </div>
      </div>
    </div>
    <div class="dt-foot-service order-bt-gp" v-if="isFoot">
      <div class="service" id="service">客服</div>
      <div class="login-btn down-pc">请移步电脑端下载</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productId: "",
      projectData: [],
      isFoot: false,
      type: 1,
      simulationList: [],
      simulationDetail: {},
    };
  },
  components: {},
  mounted() {
    this.productId = this.$route.query.id;
    this.isFoot = this.$route.query.footType ? false : true;
    this.loadData();
  },
  methods: {
    loadData() {
      const id = this.productId || "58876627169312770";
      const params = { page: "1", pageCnt: "999", softId: id };
      this.$http
        .getSimulationItemList(params)
        .then((res) => {
          if (res.flag == 0) {
            this.simulationList = res.data.list;
          } else {
            // Message.error(res.message);
          }
        })
        .catch((err) => {});
      this.$http
        .getSimulationDetail(id)
        .then((res) => {
          if (res.flag == 0) {
            this.simulationDetail = res.data || {};
          } else {
            // Message.error(res.message);
          }
        })
        .catch((err) => {});
    },
    isCover(url) {
      let path = "";
      if (!url) {
        return path;
      }
      if (url.indexOf("https://") != -1) {
        path = url;
      } else {
        path = "https://i.zmylschool.com" + url;
      }
      return path;
    },
  },
};
</script>

<style lang='scss' scoped>
@import url("@/assets/scss/simulation.scss");
</style>
